<template>
  <div>
    <a-card title="查看销售单详情" >     
      <!-- <a-button slot="extra" type="primary" style="margin-right: 8px;"  v-print="'#printContent'"> <a-icon type="printer" />打印</a-button> -->
       <!-- <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost @click="() => { this.showTz=!this.showTz; }" v-if="!is_dagong_table"> <a-icon type="swap" />调整表格</a-button>      -->
      <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
      <div style="text-align: center" v-if="info.sales_account_items">  
      <!-- <div>
        调整表格
        <a-input v-model="columns[1].width" :min="0" size="small" placeholder=""></a-input>
      </div> -->
      <table id="dishihuizong" width="30%" border="1" cellspacing="1" cellpadding="4" bgcolor="#fefefe" align="center" style="margin-bottom:1px" v-if="showTz"> 
        <tr>          
          <td  width="33%" class="btbg head titfont">商品名称</td>
          <td width="33%" class="btbg head" >规格</td>
          <td width="33%" class="btbg head" >备注</td>
        </tr>
        <tr>          
          <td class="btbg head titfont"><a-input-number v-model="columns_select[1].width" :min="0" size="small"></a-input-number></td>
          <td class="btbg head" ><a-input-number v-model="columns_select[2].width" :min="0" size="small"></a-input-number></td>
          <td class="btbg head" ><a-input-number v-model="columns_select[8].width" :min="0" size="small"></a-input-number></td>
        </tr>
      </table>
      
      <section id="printContent" style="display: inline-block;">
        <a-spin :spinning="loading">
          <!-- <img id="barcode" style="float: right" /> -->
        <div style="text-align:center;font-weight:bolder"><h3 ><span style="font-weight:bolder">温州励鑫金属有限公司销售单详情</span></h3></div>
        <span style="float:left;color:black">销售编号：{{ info.number}}</span>
        <table id="dishihuizong" width="100%" border="1" cellspacing="1" cellpadding="4" bgcolor="#fefefe" align="center" style="margin-bottom:1px"> 
        <tr>          
          <td  width="4.9%" class="btbg head titfont">客户</td>
          <td width="27%" class="btbg head" style="text-align:left;">{{ info.client_name }}</td>
          <td width="5%" class="btbg head titfont" >电话</td>
          <td width="10%" class="btbg head" >{{ info.client_phone }}</td>
          <td width="7%" class="btbg head titfont" >经手人</td>
          <td width="7%" class="btbg head" >{{ info.handler_name }}</td>
          <td width="8%" class="btbg head titfont" >发货时间</td>
          <td width="15%" class="btbg head" >{{ info.handle_time }}</td>
        </tr>
      </table>
          <!-- <a-divider orientation="left" style="margin-top: 30px;">结算账户信息</a-divider>
          <a-table
            rowKey="id"
            size="middle"
            :columns="columnsAccount"
            :data-source="info.sales_account_items"
            :pagination="false" /> -->
          <!-- <a-divider orientation="left" style="margin-top: 30px;">产品信息</a-divider> -->
          <a-table
            bordered
            rowKey="id"
            size="middle"
            :columns="columns_select"
            :data-source="info.sales_goods_items"
            :pagination="false" />
            <table id="dishihuizong" width="100%" border="1" cellspacing="1" cellpadding="1" bgcolor="#fefefe" align="center" style="margin-top:1px">          
        </table>
        </a-spin>
      </section>    
      </div>
    </a-card>
  </div>
</template>

<script>
  import _ from 'lodash';
  import { saleOrderDetail } from '@/api/sale'
  import { convertCurrency } from '@/utils/functions'
  import {canshu,columns_dagong_detail,rules,columnsAccount,
calzhong_dg,calmianji_dg,calclAmount,caljgAmount_dg,callingjianDj_dg,calljtotalAmount_dg,calshifuAmount_dg
} from "@/views/sale/saleCreate/js/data";
  import JsBarcode from 'jsbarcode'

export default {
    data() {
      return {
        loading: false,
        materialLoading: false,
        // receiptOrder: undefined,
        info: {},
        columns_dagong_detail,
        columns_dagong_data:[],
        is_dagong_table: false,
        showTz: false,
        columns_select:[],
        columns: [
          {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 35,
            customRender: (value, item, index) => {
              return item.isTotal ? '合计' : (index + 1)
            },
          },
          {
            title: '商品名称',
            dataIndex: 'goods_name',
            key: 'goods_name',
            width: 80,
          },
        {
          title: "规格",
          dataIndex: "guige",
          key: "guige",
          width: 80,
          align:'center',
        },
        {
          title: "尺寸",
          dataIndex: "chicun",
          key: "chicun",
          width: 60,
          align:'center',
          scopedSlots: { customRender: "chicun" },
        },
        {
          title: "弧长",
          dataIndex: "huchang",
          key: "huchang",
          width: 60,
          align:'center',
          scopedSlots: { customRender: "huchang" },
        },
        {
          title: "材料费",
          dataIndex: "clf",
          key: "clf",
          align:'center',
          children:[
            {
          title: "数量",
          dataIndex: "clsl",
          key: "clsl",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "clsl" },
        },
        {
          title: "单价",
          dataIndex: "cldj",
          key: "cldj",
          width: 50,
          align:'center',
          scopedSlots: { customRender: "cldj" },
        },
        {
          title: "金额",
          dataIndex: "clAmount",
          key: "clAmount",
          width: 70,
          align:'center',
          customRender: (value, item) => {
            if (item.isTotal) return value;
            value = NP.times(item.clsl, item.cldj);
            return item.id ? NP.round(value, 2) : "";
          },
        },
          ],
        },
                {
          title: "加工费",
          dataIndex: "jgf",
          key: "jgf",
          align:'center',
          children:[
            {
          title: "数量",
          dataIndex: "jgsl",
          key: "jgsl",
          width: 40,
          align:'center',
          scopedSlots: { customRender: "jgsl" },
        },
        {
          title: "单价",
          dataIndex: "jgdj",
          key: "jgdj",
          width: 50,
          align:'center',
          scopedSlots: { customRender: "jgdj" },
        },
        {
          title: "金额",
          dataIndex: "jgAmount",
          key: "jgAmount",
          width: 70,
          align:'center',
          customRender: (value, item) => {
            if (item.isTotal) return value;
            value = NP.times(item.jgsl, item.jgdj);
            return item.id ? NP.round(value, 2) : "";
          },
        },
        {
          title: "加工人员",
          dataIndex: "jgry_items",
          key: "jgry_items",
          width: 60,
          align:'',
          customRender: (value, item, index) => {
            let jgry=""
            value.forEach(e => {
              jgry+=e.name+"、"
            });
            return jgry.slice(0,jgry.length-1)
          },
        },
        {
          title: "分类",
          dataIndex: "jgfl_name",
          key: "jgfl_name",
          width: 70,
          align:'center',
        },
          ]
        },
        {
          title: "总金额",
          dataIndex: "totalAmount",
          key: "totalAmount",
          width: 75,
          align:'center',
          customRender: (value, item) => {
            if (item.isTotal) return value;
            value = NP.times(item.clsl, item.cldj)+
            NP.times(item.jgsl, item.jgdj);
            // value =item.clAmount+item.jgAmount;
            return item.id ? NP.round(value, 2) : "";
          },
        },
          {
          title: "备注",
          dataIndex: "beizhu",
          key: "beizhu",
          width: 80,
          align:'center',
          scopedSlots: { customRender: "beizhu" },
        },
        ],
        columnsAccount: [
          {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 45,
            customRender: (value, item, index) => {
              return item.isTotal ? '合计' : (index + 1)
            },
          },
          {
            title: '结算账户',
            dataIndex: 'account_name',
            key: 'account_name',
            width: 200,
          },
          {
            title: '付款金额',
            dataIndex: 'collection_amount',
            key: 'collection_amount',
            width: 200,
          }
        ],
      }
    },
    methods: {
    unitTypeChange(unitType)
    {
      this.columns_dagong_data=_.cloneDeep(columns_dagong_detail)
      if(!unitType){
        this.columns_dagong_data[2].children.splice(4,1)//根据用料计量默认为重量删除面积
        this.columns_dagong_data[2].title="用料(长宽厚:mm,面积:dm²)"
      }else{
        this.columns_dagong_data[2].children.splice(5,1)//根据用料计量默认为重量删除面积
        this.columns_dagong_data[2].title="用料(长宽厚:mm,重:kg)"
      }      
    },
    NPround2(val)
    {
      return NP.round(val,2)
    },
    convertCurrency(money){
      return convertCurrency(money)
    },
    //  getJsBarcode(number) {
    //     JsBarcode("#barcode", number, {
    //       lineColor: '#000',
    //       width: 2,
    //       height: 40,
    //       displayValue: true
    //     });
    //   },
      getgoodsData(sales_goods_items){
          // 统计合计
      let clAmount = 0,
          jgAmount = 0,
          ljtotalAmount_dg = 0,
          feiliaoAmount_dg = 0,
          shifuAmount_dg = 0;
        this.zongjine=0;
      for (let item of sales_goods_items) {
        clAmount = NP.plus(clAmount,item.clAmount);
        jgAmount = NP.plus(jgAmount,item.jgAmount);  
        ljtotalAmount_dg = NP.round(NP.plus(ljtotalAmount_dg,item.ljtotalAmount_dg),2);
        feiliaoAmount_dg = NP.round(NP.plus(feiliaoAmount_dg,item.feiliaoAmount_dg),2);
        shifuAmount_dg = NP.round(NP.plus(shifuAmount_dg,item.shifuAmount_dg),2);      
      }
      return{clAmount,jgAmount,ljtotalAmount_dg,feiliaoAmount_dg,shifuAmount_dg}
      },
      initData() {
        this.loading = true;
        saleOrderDetail({ id: this.$route.query.id }).then(data => {
          this.info = data;
          this.is_dagong_table=data.sales_goods_items[0].is_dagong_table
          let unitType=data.sales_goods_items[0].yongliaojl
          this.unitTypeChange(unitType)
          this.columns_select=this.is_dagong_table?this.columns_dagong_data:this.columns
          this.info.sales_account_items = [
            ...this.info.sales_account_items,
            {
              id: '-1',
              isTotal: true,
              collection_amount: this.info.collection_amount,
            },
          ];
          let Amount=this.getgoodsData(this.info.sales_goods_items)
          // this.getJsBarcode(data.number)
        }).finally(() => {
          this.loading = false;
        });
      },
    },
    mounted() {
      this.initData();
    },
  }
</script>
<style scoped>
::v-deep .ant-table-thead > tr >th{
  color: rgb(0, 0, 0)!important;
  background: #f9f9f9 !important;
  border: solid  1px #000000!important; 
  padding:1px!important;
}
::v-deep .ant-table-tbody > tr >td{
  color: rgb(0, 0, 0)!important;
  border: solid 1px #000000!important; 
  padding:1px!important; 
} 
.head{
 padding:1px!important; 
}
::v-deep table{
      /* 边框合并 */
      color: rgb(0, 0, 0)!important;
      border-collapse: collapse!important; 
} 
.font-left{
  padding-left: 20px;
  text-align: left;
}
.span-fenge{
  padding-left: 10px;
}
</style>
